div#swiper_container
  width 100%
  height 12rem
  position relative
  transition all .3s
  overflow hidden

#swiperBox.recent-post-item
  width 100%
  cursor default
  margin-top 0

#swiperBox

  .swiperBox-top-text
    position absolute
    z-index 2
    color var(--efu-white)
    background var(--efu-red)
    letter-spacing 3px
    top 0
    left 15px
    font-size 15px
    width 35px
    display flex
    justify-content center
    border-radius 0 0 12px 12px

  .swiper-button-next::after, .swiper-button-prev::after
    font-size 1rem !important

  .swiper-button-prev, .swiper-button-next
    transition all .3s
    border-radius 5px
    color var(--efu-main) !important
    background var(--efu-maskbg)
    opacity .5

    &:hover
      opacity 1
      transition all .3s
      color var(--efu-white) !important
      background var(--efu-main)

  .swiper-button-next::after, .swiper-button-prev::after
    font-size 1.5rem
    color var(--efu-bg)

  .blog-slider__pagination .swiper-pagination-bullet
    margin 0 8px
    width 11px
    height 11px
    display inline-block
    border-radius 99px
    background var(--efu-white)
    opacity .8
    transition all .3s

  .blog-slider__pagination .swiper-pagination-bullet-active
    opacity 1
    background var(--efu-main)
    width 30px

  .blog-slider__pagination
    position absolute
    z-index 21
    text-align center

  #recent-posts > #swiperBox.recent-post-item
    cursor default

  .blog-slider__item
    background-size cover
    background-position center
    overflow hidden

    &::after
      content ''
      position absolute
      width 100%
      height 100%
      background-color rgba(0, 0, 0, .5)
      z-index -1
      left 0
      top 0

  .blog-slider__content > *
    text-align center
    line-height 1.5
    margin 2px 0
    color var(--efu-white)

  a.blog-slider__title
    font-size 2rem

    +maxWidth768()
      font-size 1.3rem

  .blog-slider__code
    display block
    font-weight 500

  .blog-slider__text
    font-size 18px
    -webkit-line-clamp 2
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    +minWidth1300()
      padding 0 5rem
    +maxWidth900()
      padding 0 3rem
    +maxWidth768()
      display none

  .blog-slider__content
    padding 0 50px 20px
    display flex
    justify-content center
    align-items center
    flex-direction column
    height 100%